<script setup>
  import Head from './components/Head.vue';
  import Left from './components/Left.vue';
  import Introduction from './components/Introduction.vue';
import { ref } from 'vue';

  let msg = ref("")
  function receiver(data){
    msg.value = data
  }

</script>

<template>
  <div>
    {{ msg }}
    <hr>
    <Head class="head"></Head>
    <Left @sendMsg="receiver" class="list"></Left>
    <Introduction :message="msg" class="content"></Introduction>

  </div>

</template>

<style scoped>
  .head{
    height: 100px;
    border: 1px solid red;
  }
  .list{
    border: 1px solid rgb(70, 9, 150);
    width: 15%;
    height: 1000px;
    float: left;
  }

  .content{
    border: 1px solid rgb(236, 9, 168);
    width: 83%;
    height: 1000px;
    float: right;
  }

</style>
